<template>
	<view class="whole">
		<view class="whole_img" v-if="false">
			<!-- 轮播区域 -->
			<u-swiper style="" height="270rpx" :list="list5" @change="e => current = e.current" :autoplay="false" keyName="file_url">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="introduce_box">
			<view class="introduce_title">
				书院介绍
			</view>
			<introduce :list={data:list}></introduce>
		</view>
	</view>
</template>

<script>
	import introduce from '@/components/introduce.vue';
	import {
		carousel
	} from '@/common/api/shuyuan.js'
	export default {
		components:{
			introduce
		},
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				current: 0,
			}
		},
		created() {
			// this.carouselList()
		},
		methods: {
			carouselList() {
				carousel().then(res => {
					console.log('resssss',res);
					this.list5 = res.data.list;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}
	.whole_img {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		// border-radius: 16rpx;
		// overflow: hidden;
		// .u-swiper{
		// 	overflow: hidden;
		// 	border-radius: 16rpx;
		// }
	}
	.introduce_box {
		width: 100%;
		.introduce_title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 700;
			color: #EEEEEE;
			padding: 40rpx 30rpx 24rpx;
			box-sizing: border-box;
		}
	}
</style>